<template>
  <div style="width: 100%" class="mgl10 h100 appMain box-shadow r20 content">
    <div class="binInfo">
      <div class="wxicon fdc acenter flex">
        <el-image style="width: 50px; height: 50px" :src="WXICON"></el-image>
        <div class="title">微信绑定</div>
      </div>
      <div class="InputInfo">
        <el-form
          :model="FormData"
          :rules="rules"
          label-position="top"
          class="w100"
          ref="FormRef"
        >
          <div class="width100">
            <!-- <el-form-item label="绑定账户">
              <div class="tbg width100"></div>
            </el-form-item> -->
            <el-form-item label="原密码">
              <div class="tbg width100">{{ UserInfo.PWD }}</div>
            </el-form-item>
            <el-form-item label="新密码" prop="PassWord">
              <el-input
                v-model="FormData.PassWord"
                placeholder="请输入"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item label="再次输入" prop="RepeatPW">
              <el-input
                v-model="FormData.RepeatPW"
                placeholder="请输入"
                type="password"
                show-password
              ></el-input>
            </el-form-item>
          </div>
          <div style="margin-top: 50px">
            <el-button
              type="primary"
              @click="handleEditPassWord"
              size="large"
              round
              style="width: 100%"
              >保存账号</el-button
            >
          </div>
        </el-form>
      </div>
    </div>

    <div class="bgImg flex jcenter acenter mgr20 appMain">
      <el-image fit="cover" :src="ZHAQBG" style="width:500px;height:500px"></el-image>
    </div>
  </div>
</template>

<script setup name="AccountSecurity">
import ZHAQBG from "@/assets/images/Information/账户安全背景.svg";
import WXICON from "@/assets/images/Information/微信.svg";
import useUserStore from "@/store/modules/user.js";
import { EditUserPWD } from "@/api/system/user.js";
const { proxy } = getCurrentInstance();
const UserInfo = computed(() => useUserStore().userInfo);
const FormData = ref({});
const FormRef = ref({});
const rules = {
  PassWord: [
    {
      required: true,
      pattern: /(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[\W_]).{6,}/,
      message: "大小写英文、数字、符号。且长度不可低于6位",
      trigger: "blur",
    },
  ],
  RepeatPW: [
    {
      validator: validatorPW,
      required: true,
      trigger: "blur",
    },
  ],
};
function validatorPW(rule, value, callback) {
  if (FormData.value[rule.field] != FormData.value.PassWord) {
    return new Error("两次密码不一致");
  }
  if (!FormData.value[rule.field]) {
    return new Error("大小写英文、数字、符号。且长度不可低于6位");
  }
  callback();
}
async function handleEditPassWord() {
  console.log(33);
  FormRef.value.validate(async (valid) => {
    console.log(valid);
    if (valid) {
      try {
        let query = {
          ID: UserInfo.value.ID,
          PassWord: FormData.value.PassWord,
        };
        await EditUserPWD(query);
        proxy.$modal.msgSuccess("修改成功");
        useUserStore().editStoreUser({
          ...UserInfo.value,
          PWD: FormData.value.PassWord,
        });
        FormData.value = {};
      } catch (error) {
        console.log(error);
      }
    }
  });
}
</script>

<style lang="scss" scoped>
.content {
  display: flex;
  height: 100%;
  .binInfo {
    width: 35%;
    padding-top: 50px;
    .title {
      width: 80%;
      text-align: center;
      font-size: 24px;
      font-weight: bold;
      padding: 20px 0;
      margin: 0 20px;
      border-bottom: 1px solid #ddd;
    }
  }
  .bgImg {
    width: 65%;
  }
}
.InputInfo {
  padding: 20px 0 20px 0;
  margin: 0 20px;
  :deep(.el-form) {
    .el-form-item {
      width: 100%;
      .el-form-item__label {
        color: #3c3c3c;
        font-size: 16px;
      }
    }
  }

  .submit {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
